<template>
  <view>
    <view class="info">
      <view class="title">{{ title }}</view>
      <view class="time">{{ start_time | formatDate }}</view>
    </view>

    <view class="dir-box">
      <view class="dir-text">舞台方向</view>
    </view>

    <view class="seats-one">
      <view v-for="(item, index) in seats" :key="index" class="seats-item" @click="onItemClickSelect(item)">
				<view class="qu c-red">{{item.region_number?item.region_number:"普通"}}区</view>
				<view class="price c-red b">￥{{item.price}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import {performInfo,performChoiceList} from "@/api/2_activity";
export default {
  data() {
    return {
      id: '',
      title: '',
      remark: '',
      start_time: '',
			seats: []
    };
  },
  onLoad(options) {
    this.id = options.id
    performInfo(this.id).then(res=>{
			this.title = res.data.title
			this.remark = res.data.remark
			this.start_time = res.data.start_time
    })
    performChoiceList(this.id).then(res => {
      this.seats = res.data
    })
  },
  methods: {
		onItemClickSelect(item) {
			uni.navigateTo({
			  url: `/pages/2_development/show_buy_ticket/seat_selection?id=${this.id}&qu=${item.region_number}&price=${item.price}`
			})
		}
	}
};
</script>

<style lang="scss">
.info {
  background: #fff;
  padding: 20rpx 0;
}

.title {
  font-size: 32rpx;
  font-weight: 700;
  margin: 20rpx 30rpx 0;
}

.time {
  margin: 20rpx 30rpx;
  font-size: 24rpx;
  color: #82848f;
}

.desc {
  margin: 20rpx 30rpx;
  font-size: 24rpx;
  color: #f00;
}

.dir-box {
  background: #fff;
  margin: 20rpx;
  padding: 30rpx;
	border-radius: 20rpx;

  .dir-text {
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #eee;
    border-radius: 10rpx;
  }
}

.seats-one{
	margin: 20rpx;
	padding: 20px 0;
	display: flex;
	flex-wrap: wrap;
	border-radius: 20rpx;
	background: #fff;
	.seats-item{
		display: flex;
		align-items: center;
		margin: 10rpx 30rpx 10rpx 30rpx;
		padding: 15px 0;
		width: calc(50% - 60rpx);
		border-radius: 20rpx;
		background-color:rgba($color: #e9a084, $alpha: 0.1) ;
		.qu{
			width: 120rpx;
			font-size: 28rpx;
			padding-left: 10rpx;
		}
		.price{
			width: calc(100% - 80rpx);
			text-align: center;
			font-size: 38rpx;
		}
	}
}
</style>
